<template>
  <div>
    <h3>Home组件：演示组合API和optionsAPI混用,reactive递归代理,showdowRef等</h3>
    姓名：{{ userName }} <button @click="setName">点击改变Name</button><br />
    姓名：{{ company }} <button @click="setCompany">点击改变company</button
    ><br />
    {{ state.time }}
    <button @click="changeState">点击改变state.time</button><br />
    <p>{{ showdowRefObj.a }}</p>
    <p>{{ showdowRefObj.af.b }}</p>
    <p>{{ showdowRefObj.af.bf.c }}</p>
    <button @click="change">测试修改shadowRef声明的变量值已改但未渲染ui，通过triggerRef触发渲染</button><br />
  </div>
</template>

<script>
import { reactive, ref, isRef, isReactive, shallowRef, triggerRef } from 'vue'
export default {
  name: 'Home',
  beforeCreate() {
    console.log('before-creat执行')
  },
  created() {
    console.log('created执行')
  },
  setup() {
    console.log('setup执行')
    let userName = ref('zhangqianfeng')
    function setName() {
      userName.value = userName.value + '---123'
    }
    console.log('isRef-', isRef(userName))
    let state = reactive({
      time: new Date(),
      a: 'a',
      af: {
        b: 'b',
        bf: {
          c: 'c',
          cf: {
            d: 'd',
          },
        },
      },
    })
    let showdowRefObj = shallowRef({
      a: 'a',
      af: {
        b: 'b',
        bf: {
          c: 'c',
          cf: {
            d: 'd',
          },
        },
      },
    })
    console.log('isReactive-', isReactive(state))
    console.log('---递归监听每一层都是Proxy对象,state.af:', state.af) //Proxy对象
    console.log('---递归监听每一层都是Proxy对象,state.af.bf:', state.af.bf) //Proxy对象
    function changeState() {
      let newTime = new Date(state.time.getTime())
      newTime.setDate(state.time.getDate() + 1)
      state.time = newTime
    }
    function change() {
      showdowRefObj.value.a = 1
      showdowRefObj.value.af.b = 2
      showdowRefObj.value.af.bf.c = 3
      console.log(showdowRefObj) //值已更改但页面未重新渲染
      triggerRef(showdowRefObj) //调用triggerRef重新渲染页面
    }
    return { userName, setName, state, changeState, showdowRefObj, change }
  },
  data() {
    return {
      company: 'aspire',
    }
  },
  methods: {
    setCompany() {
      this.company = 'tencent'
    },
  },
}
</script>
